<template>
	<div class="system-menu-container">
		<div class="system-user-search mb15">
			<el-form :model="param" :inline="true" ref="queryFormRef" @keyup.enter.native="loadList">
				<el-form-item prop="receiveState" label="阅读状态">
					<el-select v-model="param.dataForm.receiveState" placeholder="请选择">
						<el-option v-for="item in optionsNd" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="name" label="发送时间">
					<el-date-picker v-model="param.dataForm.oper_time_start" type="date" placeholder="发送时间"  value-format="YYYY-MM-DD" format="YYYY-MM-DD">
						</el-date-picker>
				</el-form-item>
				<el-button type="primary" class="ml7" @click="loadList">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button type="primary" class="ml10" @click="reSetForm(queryFormRef)">
					<el-icon>
						<ele-Refresh />
					</el-icon>
					重置
				</el-button>
			</el-form>
		</div>
		<el-table :data="dataList" border v-loading="listLoading" style="width: 100%;">
			<el-table-column prop="msg_context" label="消息内容" ></el-table-column>
			<el-table-column prop="sender_name" label="发送人" width="150"></el-table-column>
			<el-table-column prop="send_time" label="发送时间" width="150"></el-table-column>
			<el-table-column prop="receiver_name" label="接收人" width="120"></el-table-column>
			<el-table-column prop="receive_state" label="阅读状态" width="120">
				<template #default="scope">
					<el-tag v-if="scope.row.receive_state === '1'" size="small" type="danger">未读</el-tag>
					<el-tag v-else size="small">已读</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			:pager-count="5"
			:page-sizes="[10, 50, 200]"
			v-model:current-page="param.page"
			background
			v-model:page-size="param.limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total" small>
		</el-pagination>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent} from 'vue'
import type { FormInstance } from 'element-plus'
import {systemApi} from '/@/api/systemapi'
export default defineComponent({
	setup () {
		const queryFormRef = ref<FormInstance>()
		const state = reactive({
			listLoading: false,
			dataList: [],
			total: 0,
			totalSelect: 0,
			hasDelFile: false,
			param: {
				page: 1,
				limit: 10,
				dataForm: {
					name:''
				}
			},
			optionsNd: [
				{
				value: "1",
				label: "未读"
				},
				{
				value: "2",
				label: "已读"
				}
			]
		})
		// 页面加载时
		onMounted(() => {
			// 列表查询
			loadList()
		})

		//查询
		const loadList = () => {
			state.listLoading = true
			systemApi().queryMsgStreamList(state.param).then(data => {
				if (data && data.code === 0) {
					state.dataList = data.page.list
					state.total = data.page.totalCount
				} else {
					state.dataList = []
					state.total = 0
				}
			}).catch(() => {
			}).finally(() => {
				state.listLoading = false
			})
		}
		//重置
		const reSetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.resetFields()
			state.param.page = 1
			loadList()
		}
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.param.limit = val;
			loadList()
		}
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.param.page = val;
			loadList()
		}
		return {
			loadList,
			reSetForm,
			queryFormRef,
			onHandleSizeChange,
			onHandleCurrentChange,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>